<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1000px"
    append-to-body
    :before-close="close"
  >
    <div class="preview-container" v-html="form.templateContent">
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from '@/utils'
import { addContractTemplate, updateContractTemplate } from '@/api/contract/template'

export default {
  name: 'Setting',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '预览合同'
    },
    formData: {}
  },
  data() {
    return {
      visible: false,
      form: {
        name: ''
      },
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.visible = newVal // 监测value的变化，并赋值。
      if (newVal) {
        this.form = this.formData
        this.init()
      }
    },
    visible(val) {
      this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  methods: {
    init() {
      this.reset()
    },
    reset() {
      this.resetForm('form')
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

</style>
